<template>
  <div class="drawerDetail">
    <el-drawer :visible="drawerOrderInfo"
               size="50%"
               :before-close="handleClose"
               ref="drawer"
               :with-header="false">
      <!-- 订单信息 -->
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>订单信息</span>
        </div>
        <div class="padding30">
          <div>订单编号: {{ orderInfoData.sn_order }}</div>

          <div>下单时间
            {{ orderInfoData.create_time}} </div>
          <div>支付状态: {{ informationType(orderInfoData?.status)?.text }}</div>
          <div>支付方式: {{serviceStatusType(orderInfoData.pay_way)?.text  }}</div>
          <div>价格: ￥{{orderInfoData.total_price  }}</div>
          <div>会员折扣: {{Number(orderInfoData.discount_ratio)/10 }}折</div>
          <div>优惠: -￥{{Number(orderInfoData.discount_amount)}}</div>
          <div>折扣价格: -￥{{Number(orderInfoData.coupon_deduction_amount)}}</div>
          <div v-if="orderInfoData.discount_intensity">优惠券:-￥{{Number(orderInfoData.discount_intensity)}}</div>
          <div>积分折扣:-￥{{Number(orderInfoData.point_deduction_amount)}}</div>

          <div>实付款:￥{{Number(orderInfoData.reality_amount)}}</div>
          <div>备注:{{(orderInfoData.remark)}}</div>
        </div>
      </el-card>
      <!-- 商品信息 -->
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>商品信息</span>
        </div>
        <div class="realNameStyle display">
          <div class="flex">
            <div>
              <img class="avaterName"
                   :src="orderInfoData.host_img[0]"
                   alt="" />

            </div>

          </div>
          <div class="flex-column-between"
               style="height: 74px">
            <div style="font-size: 18px;">{{ orderInfoData.goods_name }}</div>
            <div style="color: rgb(153, 153, 153);">{{ orderInfoData.title }}</div>
            <div class="technicianName">数量x{{ orderInfoData?.number}}</div>

          </div>
        </div>
      </el-card>

      <!-- 下单地址 -->
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>收货地址</span>
        </div>
        <div class="padding30"
             v-if="orderInfoData.take_over_way==2">
          <div class="flex-align-center">下单人

            <img class="avaterName"
                 :src="orderInfoData?.avatar"
                 alt="" />
            <span>{{ orderInfoData?.wachat_nickname }}</span>
          </div>
          <div>送货人:{{ orderInfo.express_name? orderInfo.express_name:'--'}}</div>
          <div>送货人联系方式:{{ orderInfo.express_phone? orderInfo.express_phone:'--'}}</div>
          <div>联系方式:{{ orderInfoData.phone? orderInfoData.phone:'--'}}</div>
          <div>收货地址:{{ orderInfoData.province_name }} - {{
              orderInfoData.city_name
            }} - {{orderInfoData.county_name}}</div>
          <div v-if="orderInfoData.address">详细地址:{{ orderInfoData.address }}</div>
        </div>

        <div class="padding30"
             v-else>
          <div class="flex-align-center">下单人

            <img class="avaterName"
                 :src="orderInfoData?.avatar"
                 alt="" />
            <span>{{ orderInfoData?.wachat_nickname }}</span>
          </div>
          <div>门店名称:{{ orderInfoData.store_name? orderInfoData.store_name:'--'}}</div>
          <div>门店联系方式:{{ orderInfoData.store_phone? orderInfoData.store_phone:'--'}}</div>
          <div>门店地址:{{ orderInfoData.store_province_name }} - {{
              orderInfoData.store_city_name
            }} - {{orderInfoData.store_county_name}}</div>
          <div>详细地址:{{ orderInfoData.store_address }}</div>
        </div>
      </el-card>

    </el-drawer>

  </div>
</template>
  <script>

import moment from 'moment'
import { goodsOrderInfo } from '@/api/order/goodsOrderList'
// import { orderInfoData } from '../constant/constant';
export default {
  name: 'drawerOrderInfo',
  components: {},
  props: {
    drawerOrderInfo: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      orderInfoData: {},
      isUpdate: false,
      integralName: '',
      //  服务时长
      serviceTimeTotal: 0,
      subOrderInfoData: null,
      disbursementsTotal: 0,
      innerDrawer: false,
      orderInfo: null

    };
  },
  computed: {
    serviceStatusType () {
      return function (serviceType) {

        if (serviceType == 1) {
          return {
            text: '余额支付',
            types: 'success'
          };
        } else if (serviceType == 2) {
          return {
            text: '微信在线支付',
            types: 'success'
          };
        } else if (serviceType == 3) {
          return {
            text: '微信线下充值',
            types: 'success'
          };
        } else if (serviceType == 4) {
          return {
            text: '支付宝充值',
            types: 'success'
          };
        } else if (serviceType == 5) {
          return {
            text: '现金充值',
            types: 'success'
          };
        }
        else if (serviceType == 6) {
          return {
            text: 'pos充值',
            types: 'success'
          };
        }
        else if (serviceType == 7) {
          return {
            text: '微信线上扫码充值',
            types: 'success'
          };
        } else if (serviceType == 8) {
          return {
            text: '支付宝在线扫码充值',
            types: 'success'
          };
        }
      };
    },

    formattedDate () {
      return (params) => {
        const currentDate = moment(params);
        const formattedDate = currentDate.format('YYYY-MM-DD HH:mm');
        return formattedDate;
      };
    },
    cardCoupon () {
      return function (pointsUsed, deductionAmount) {
        console.log(pointsUsed, deductionAmount)
        let pointsUseds = pointsUsed ? pointsUsed : 0
        let deductionAmounts = Number(deductionAmount) ? Number(deductionAmount) : 0
        if (deductionAmounts >= pointsUseds) {
          const cardCoupon = deductionAmounts - pointsUseds
          return cardCoupon
        } else {
          return 0
        }
      }
    },
    informationType () {
      return function (informationType) {

        if (informationType == 3) {
          return {
            text: '待发货',
            types: 'warning'
          };
        } else if (informationType == 4) {
          return {
            text: '待收货',
            types: 'info'
          };
        } else if (informationType == 5) {
          return {
            text: '已退款',
            types: 'danger'
          };
        } else if (informationType == 6) {
          return {
            text: '已完成',
            types: 'success'
          };
        } else if (informationType == 1) {
          return {
            text: '待付款',
            types: 'success'
          };
        } else if (informationType == 2) {
          return {
            text: '已支付',
            types: 'success'
          };
        } else if (informationType == 8) {
          return {
            text: '已取消',
            types: 'danger'
          };
        } else if (informationType == 7) {
          return {
            text: '已退款',
            types: 'danger'
          };
        }
      };
    }
  },
  activated () {
    this.reload()

  },
  methods: {

    // 关闭抽屉
    handleClose () {
      console.log('查看详情');
      this.serviceTimeTotal = 0
      this.disbursementsTotal = 0
      this.$emit('update:drawerOrderInfo', false);
    },


    // 打开嵌套抽屉
    viewDetail (row) {
      this.innerDrawer = true

      this.subOrderInfoData = row
      console.log(this.subOrderInfoData)
    },

    handleCloseInner (done) {
      this.$confirm('确定关闭吗？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  },
  watch: {
    drawerOrderInfo (visible) {
      this.$nextTick(async () => {
        if (visible) {
          if (this.data) {
            // 隐藏账号密码

            console.log('orderInfoData', this.data);
            this.orderInfoData = this.data;

            const res = await goodsOrderInfo({
              id: this.data.id
            })

            if (res.code == 0) {
              this.orderInfo = res.data
              console.log(this.orderInfo)
            }
            this.isUpdate = true;
          } else {
            this.isUpdate = false;
            this.hiddenPassword = true;
          }
        } else {
          //   this.$nextTick(() => {
          //     this.$refs['form'].resetFields();
          //     console.log(this.form);
          //     this.fileList = [];
          //   });
        }
      });
    }
  }
};
  </script>
  <style lang="less" scoped>
.avaterNames {
  width: 32px;
  height: 32px;

  margin-right: 5px;
}
.box-card {
  /deep/.el-card__header {
    background-color: #fafafc;
  }
  .clearfix {
    font-weight: 700;
    color: #000;
  }
  .padding30 {
    .avaterName {
      margin-left: 10px;
      width: 32px;
      height: 32px;
      border-radius: 32px;
      margin-right: 5px;
    }

    div {
      margin-bottom: 20px;
    }
    div:last-child {
      margin-bottom: 0px;
    }
  }
  .realNameStyle {
    position: relative;
    .avaterName {
      width: 74px;
      height: 74px;
      margin-right: 10px;
      vertical-align: middle;
      margin-right: 5px;
    }
    .addClocks {
      position: absolute;
      top: 0;
      width: 30px;
      line-height: 24px;
      text-align: center;
      height: 24px;
      background-color: #1890ff;
    }
    .technicianName {
      color: #1890ff;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
    }
  }
}
.drawerDetail {
}
</style>
  